<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../网页展示/js/jquery-3.4.1.min.js"></script>
    <style>
        #d{
            top: 100px;
            left: 100px;
            position: absolute;
        }
        #s{
            background-color:white;
            position: absolute;
            border: 1px solid blue;
            right:0px;
        }
        #s:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="d">
        <div id="s">X</div>
        <img src="img/pm.jpg" width="200px" height="150px">
    </div>
    
    <div id="div"></div>


    <script>
        //在页面中生成100个p标签
        for(let i=0;i<100;i++){
            document.write("<p>"+i+"</p>")
        }
        //获取元素本身的top和left
        // let d = document.getElementById("d");
        // let otop = parseInt(document.defaultView.getComputedStyle(d,null).top);
        // let oleft = parseInt(document.defaultView.getComputedStyle(d,null).left);
        // //轮毂事件
        // window.onscroll = function(){
        //     // console.log(document.documentElement.scrollTop) //滚动位置
        //     let stop = document.documentElement.scrollTop; //轮毂的位置
        //     let sleft = document.documentElement.scrollLeft;

        //     //刷新位置
        //     d.style.top = otop+stop+"px";
        //     d.style.left = oleft+sleft+"px";
        // }
        let s = document.getElementById("s");
        s.onclick = function(){
            d.style.visibility = "hidden";
        }

        let otop = $('#d').offset().top;
        let oleft = $('#d').offset().left;
        $(window).scroll(function(){
            let stop = $(window).scrollTop();
            let sleft = $(window).scrollLeft();
            
            $('#d').offset({'top':otop+stop,"left":oleft+sleft})
        })

    </script>
</body>
</html>